<template>
   <div>
    <div>这是一个分页组件</div>
    <div>
      <a href="javascript:;" @click='change(1)'>首页</a>
      <a href="javascript:;" @click='change(current - 1)'>上一页</a>
      <a href="javascript:;" v-for="(item,index) in number" :key='index' @click='change(item)'>{{item}}</a>
      <a href="javascript:;" @click='change(current + 1)'>下一页</a>
      <a href="javascript:;" @click='change(pagesize)'>尾页</a>
      <span>{{current}}/{{pagesize}}</span>
    </div>
   </div>
   
</template>

<script>
export default {
  name: 'pager',
  data(){
    return{
     
      current:1,
      pagesize:10,
      panelnumber:5
    }
  },
  computed:{
    number(){
      var min = this.current - Math.floor(this.panelnumber / 2)
      if(min < 1){
        min = 1;
      }
      var max = min + this.panelnumber -1;
      if(max > this.pagesize){
        max = this.pagesize;
      }
      var arr=[]
      for(let i=min;i <= max;i++){
        arr.push(i)
      }
      console.log(arr)
      return arr;
    }
  },
  methods: {
    change(event){
      if(event < 1 || event > this.pagesize){
        return
      }
      this.current = event;
      console.log(this.current)
    }
  }
  
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  margin: 0 10px;
  text-decoration: none;
}
</style>
